<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>视频管理</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
</head>
<body class="container mt-5">

<h2 class="text-center">视频管理系统</h2>

<!-- 上传视频表单 -->
<div class="card mt-4">
    <div class="card-header">上传视频</div>
    <div class="card-body">
        <form id="uploadForm">
            <div class="mb-3">
                <label class="form-label">选择视频：</label>
                <input type="file" id="file" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">桶名称：</label>
                <input type="text" id="bucket" class="form-control" value="your_bucket_name" required>
            </div>
            <div class="mb-3">
                <label class="form-label">标题：</label>
                <input type="text" id="title" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">描述：</label>
                <textarea id="description" class="form-control" required></textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">封面 URL：</label>
                <input type="text" id="coverUrl" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-primary">上传视频</button>
        </form>
    </div>
</div>

<!-- 删除视频 -->
<div class="card mt-4">
    <div class="card-header">删除视频</div>
    <div class="card-body">
        <form id="deleteForm">
            <div class="mb-3">
                <label class="form-label">桶名称：</label>
                <input type="text" id="deleteBucket" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">文件名：</label>
                <input type="text" id="deleteFileName" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">视频 ID：</label>
                <input type="number" id="deleteVideoId" class="form-control" required>
            </div>
            <button type="submit" class="btn btn-danger">删除视频</button>
        </form>
    </div>
</div>

<!-- 更新视频 -->
<div class="card mt-4">
    <div class="card-header">更新视频信息</div>
    <div class="card-body">
        <form id="updateForm">
            <div class="mb-3">
                <label class="form-label">视频 ID：</label>
                <input type="number" id="updateVideoId" class="form-control" required>
            </div>
            <div class="mb-3">
                <label class="form-label">新标题：</label>
                <input type="text" id="updateTitle" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">新描述：</label>
                <textarea id="updateDescription" class="form-control"></textarea>
            </div>
            <div class="mb-3">
                <label class="form-label">新封面 URL：</label>
                <input type="text" id="updateCoverUrl" class="form-control">
            </div>
            <div class="mb-3">
                <label class="form-label">上传新视频（可选）：</label>
                <input type="file" id="updateFile" class="form-control">
            </div>
            <button type="submit" class="btn btn-warning">更新视频</button>
        </form>
    </div>
</div>

<!-- JavaScript -->
<script>
    document.getElementById("uploadForm").addEventListener("submit", async function (e) {
        e.preventDefault();
        const formData = new FormData();
        formData.append("file", document.getElementById("file").files[0]);
        formData.append("bucket", document.getElementById("bucket").value);
        formData.append("title", document.getElementById("title").value);
        formData.append("description", document.getElementById("description").value);
        formData.append("coverUrl", document.getElementById("coverUrl").value);

        const response = await fetch("http://localhost:8888/minio/upload", {
            method: "POST",
            body: formData
        });

        alert(await response.text());
    });

    document.getElementById("deleteForm").addEventListener("submit", async function (e) {
        e.preventDefault();
        const bucket = document.getElementById("deleteBucket").value;
        const fileName = document.getElementById("deleteFileName").value;
        const videoId = document.getElementById("deleteVideoId").value;

        const response = await fetch(`http://localhost:8888/minio/delete/${bucket}/${fileName}/${videoId}`, {
            method: "DELETE"
        });

        alert(await response.text());
    });

    document.getElementById("updateForm").addEventListener("submit", async function (e) {
        e.preventDefault();
        const formData = new FormData();
        const videoData = {
            id: document.getElementById("updateVideoId").value,
            title: document.getElementById("updateTitle").value,
            description: document.getElementById("updateDescription").value,
            cover_url: document.getElementById("updateCoverUrl").value
        };

        formData.append("video", new Blob([JSON.stringify(videoData)], { type: "application/json" }));

        const fileInput = document.getElementById("updateFile").files[0];
        if (fileInput) {
            formData.append("file", fileInput);
        }

        const response = await fetch("http://localhost:8888/minio/update", {
            method: "PUT",
            body: formData
        });

        alert(await response.text());
    });
</script>

</body>
</html>
